<template>
  <span class="level"
       :class="{level1:level===1,level2:level===2,level3:level===3,
                    level4:level===4,level5:level===5,level6:level===6}">
    Lv{{ level }}
  </span>
</template>

<script>
export default {
  name: "level",
  props: {
    level: Number
  }
}
</script>

<style scoped>
.level {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  padding: 0 4px;
  border-radius: 2px;
}
.level1{background-color: #8cdbf4;}
.level2{background-color: #6eceff;}
.level3{background-color: #599dff;}
.level4{background-color: #34d19b;}
.level5{background-color: #ffa000;}
.level6{background-color: #f36262;}
</style>